import {
    Image,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Modal,
    KeyboardAvoidingView,
    Platform,
    TextInput, ScrollView
} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import Textarea from "@/components/Textarea";

export default function refundOrderScreen() {

    const router = useRouter();

    const [foundTextModel, setFoundTextModel] = useState(false);



    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '申请退款', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <ScrollView>
                <View style={styles.refundContainer}>
                    <TouchableOpacity onPress={() => setFoundTextModel(true)}>
                        <View style={ styles.refundResultWrap }>
                            <Text style={styles.refundResultWrapTitle}>退款原因</Text>
                            <Text style={styles.refundResultWrapContent}>原因原因原因原因原因原因原因原因原</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={styles.refundMoneyContainer}>
                        <View style={styles.refundMoney}>
                            <Text style={styles.refundMoneyText}>退款金额：<Text style={styles.colorRed}>¥88.00</Text></Text>
                        </View>
                        <View style={styles.refundMoneyContent}>
                            <Text style={styles.refundMoneyContentText}>不可修改，最多￥88.00</Text>
                        </View>
                    </View>
                    <View style={styles.refundDespContainer}>
                        <View style={styles.refundDespTitle}>
                            <Text>退款说明（选填）</Text>
                        </View>
                        <View>
                            <Textarea
                                maxLength={50}
                                placeholder={'请输入退款说明'}
                                placeholderTextColor={'#c7c7c7'}
                                underlineColorAndroid={'transparent'}
                                style={ styles.signatureTextInput}
                            />
                        </View>
                    </View>
                </View>
                <TouchableOpacity>
                    <View style={styles.submitRefund}>
                        <Text style={styles.submitRefundText}>提交</Text>
                    </View>
                </TouchableOpacity>

                <Modal
                    animationType="fade"
                    transparent={true}
                    visible={foundTextModel}
                >
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={(event) => {
                            if (event.target === event.currentTarget) {
                                setFoundTextModel(false);
                            }
                        }}
                        style={styles.becameModelContainer}
                    >
                        <View style={styles.becameModelWrap}>
                            <View style={styles.becameModelTitle}>
                                <Text style={styles.becameModelTitleText}>退款原因</Text>
                            </View>
                            <Textarea
                                maxLength={20}
                                placeholder={'请输入退款说明'}
                                placeholderTextColor={'#c7c7c7'}
                                underlineColorAndroid={'transparent'}
                                style={ styles.signatureTextInput}
                            />
                            <View style={styles.becameFootWrap}>
                                <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                    <View style={styles.cancelBtn}>
                                        <Text style={styles.cancelBtnText} >取消</Text>
                                    </View>
                                </TouchableOpacity>
                                <View style={styles.okBtn}>
                                    <Text style={styles.okBtnText}>确认</Text>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>

                </Modal>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    refundContainer: {
        marginLeft: 12,
        marginRight: 12,
        backgroundColor: "#fff",
        padding: 12,
        borderRadius: 8,
    },
    refundResultWrap: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingBottom: 18,
        borderBottomWidth: 0.5,
        borderBottomColor: "#E4E6EC",
        paddingTop: 6,

    },
    refundResultWrapTitle: {
        fontSize: 14,
        color: "#2A2B30"
    },
    refundResultWrapContent: {
        fontSize: 14,
        color: "#9C9EAC",
    },
    refundMoneyContentText: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    refundMoney: {
        paddingTop: 17,
    },
    refundMoneyText: {
        fontSize: 14,
        color: "#2A2B30"
    },
    colorRed: {
        color: "#ED2A20",
    },
    refundMoneyContent: {
        paddingTop: 8,
    },
    refundMoneyContainer: {
        paddingBottom: 17,
        borderBottomWidth: 0.5,
        borderBottomColor: "#E4E6EC",
    },
    refundDespContainer: {
        paddingTop: 17,
    },
    refundDespTitle: {
        fontSize: 14,
        color: "#2A2B30",
        marginBottom: 8,
    },
    signatureTextInput: {
        backgroundColor: "#F7F7F7",
        height: 100,
        padding: 12,
        fontSize: 14,
        color: "#9C9EAC",
        borderRadius: 8,
    },
    submitRefund: {
        marginTop: 187,
        width: scaleSize(351),
        height: scaleSize(38),
        backgroundColor: "#E4E6EC",
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        margin: "auto",
    },
    submitRefundText: {
        color: "#fff",
        fontSize: 14,
    },
    becameModelContainer: {
        backgroundColor: 'rgba(0,0,0, 0.7)',
        height: "100%",
    },
    becameModelWrap: {
        width: scaleSize(296),
        // height: scaleSize(270),
        backgroundColor: "#fff",
        margin: "auto",
        borderRadius: 8,
        paddingTop: 24,
        paddingLeft: 18,
        paddingRight: 18,
        paddingBottom: 20,
        position: "relative",
        zIndex: 9,
    },
    becameModelTitle: {
        marginBottom: 14,
    },
    becameModelTitleText: {
        textAlign: "center",
        fontWeight: "bold"
        // color: "#2A2B30"
    },
    becameFootWrap: {
        marginTop: 58,
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: 10,
        paddingRight: 10,
    },
    cancelBtn: {
        backgroundColor: "#F7F8F9",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    cancelBtnText: {
        fontWeight: "bold",
    },
    okBtnText: {
        color: "#fff",
        fontWeight: "bold",
    },
    okBtn: {
        backgroundColor: "#EC6138",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
});
